<template>
  <div class="riding">
     <div id="riding_head">
	    <div>
        <span id="head_title" v-on:touchstart="show_list()">上下班</span>
        <span :class="i_down_w" id="arrows" ></span>
        </div>
	 </div>
	 <div id="arrows_items" v-show="isServe_items">
	     <ul>
		     <li v-for="(item,index) in items">
			   <span>{{item}}</span>
			 </li>
		 </ul>
	 </div>
	 <div id="riding_main">
	     <div id="cententNull" v-if="isNulls">
		     <img src="static/imgs/no_paper_17cd42b.png">
			 <p>咦！这里啥都没有哦~</p>
			 <p>快戳左下角去购票~<p>咦！这里啥都没有哦~</p></p>
		 </div>
	 </div>
  </div>
</template>

<script>
export default {

  data () {
    return {
     i_down_w:"glyphicon glyphicon-menu-down",
	 isServe_items:false,
	 items:["上下班","周边游","直通车","机场快线"],
	 isNulls:true
    }
  },
  methods:{
        show_list(){
		    
		    if(this.i_down_w == "glyphicon glyphicon-menu-down"){
	        this.i_down_w = "glyphicon glyphicon-menu-up";
		    this.isServe_items =true;
	      }else{
	       this.i_down_w = "glyphicon glyphicon-menu-down";
		     this.isServe_items =false;
		 }
		}
  }
}
</script>

<style scoped>
   .riding{
      background:#f1f1f1;
	  width:100%;
	  height:100vh;
   }
   #riding_head{ 
           width:100%;
	       height:8vh;
           background:#ff4a39;		   
		    display:flex;
	      justify-content:center;
	       align-items:center;
		   position:fixed;
	       z-index:99;
		 } 
  #head_title{
        color:#ffffff;
		font-size: 2rem;
		
		}	
#arrows{
     font-size:2rem;
	 color:#ffffff;
}
#riding_main{
     width:100%;
	 height:92vh;
	 position:relative;
	 
}
#arrows_items{
    background:rgba(000,000,000,0.5);
	width:100%;
	height:100vh;
	position:fixed;
	z-index:99;
	top:8vh;
}
#arrows_items ul{
   margin:0;
   background:#ffffff;
}
#arrows_items li{
      height:5vh;
	  border-bottom:1px solid #cccccc;
	  line-height:5vh;
	  padding-left:3vw;
	  
	  
}	
#cententNull{
      width:100%;
	  height:40%;
	  position:absolute;
	  top:40%;
	  display:flex;
	   flex-direction:column;
       justify-content:center;
       align-items:center;	  
}
#cententNull img{
      width:40%;
	  height:60%;
}	
#cententNull p{
      width:40vw;
	  text-align:center;
	  color:#cccccc;
}
</style>
